<template>
    <div class="Qiang">
        <h3 style="background-color:rgb(235, 235, 235);height:.45rem;padding:.3rem 3rem .3rem 0;font-size:.35rem;">单人首次超值精剪套餐</h3>
        <div class="unit_price">
            <p class="left">单价:</p>
            <span style="font-size:.35rem;float:right;width:20%;padding-left:3rem;">98元</span>
        </div>
        <div class="unit_amount">
            <p class="left" style="">数量:</p>
            <div class="AddAmount" style="float:right;width:40%;display:inline-block;">
                <div class="jian" style="width:.3rem;height:.4rem;float:left;border:solid .01rem rgb(230, 227, 227);font-size:.4rem;padding:.1rem .2rem;margin-eft:.1rem;">-</div>
                <input type="number" class="number" placeholder="1" style="width:1rem;height:.6rem;border:solid .01rem rgb(230, 227, 227); ">
                <div class="plus" style="width:.3rem;height:.4rem;float:right;border:solid .01rem rgb(230, 227, 227);font-size:.4rem;padding:.1rem .2rem;margin-eft:.1rem;">+</div>
            </div>
        </div>
        <div class="total_price">
            <p class="left">总价:</p>
            <span style="font-size:.35rem;float:right;width:20%;padding-left:3rem;color: rgb(226, 137, 19);">98元</span>
        </div>
        <div style="height:.5rem;background-color:rgb(235, 235, 235);"></div>
        <div class="discount" style="border-bottom:solid .5rem rgb(235, 235, 235);height:.8rem;">
                <div class="left" style="width:15%;font-size:.3rem;margin:.2rem;display:block;float:left;color:rgb(230, 227, 227);">抵用卷</div>
                <img src="../../../../../../assets/style/iconfont/right.svg" alt="" style="width:.4rem;margin-top:.2rem;padding-right:.3rem;float:right;">
        </div>
        <div class="need_pay">
                <p class="left">还需支付:</p>
                <span style="font-size:.35rem;float:right;width:20%;padding-left:3rem;color: rgb(226, 137, 19);">98元</span>
        </div>
        <div class="purchase" style="background:rgb(230, 227, 227);height:.6rem;font-size:.3rem;padding:.2rem 5rem .2rem 0;">免登录直接购买</div>
           
        <div class="phone_input" style="height:2.3rem;">
            <div class="phone_num" style="height:1rem;border-bottom:solid .01rem rgb(230, 227, 227);margin:.2rem .3rem .2rem .4rem;">
                <input type="number" placeholder="请输入手机号码" class="input" style="font-size:.35rem;width:60%;height:1rem;float:left;">
                <p style="float:right;width:2rem;background:rgb(230, 227, 227);padding:.1rem;height:.4rem;margin:.1rem .3rem .3rem 0;">发送验证码</p>
            </div>
                <div class="phone_yanzheng" style="height:1rem;margin:.2rem .3rem .2rem .4rem;">
                    <input type="number" placeholder="请输入短信中的验证码" class="input" style="font-size:.35rem;width:60%;height:1rem;float:left;">
                    <!-- <p style="float:right;width:2rem;background:gray;padding:.1rem;height:.4rem;margin:.3rem .3rem .3rem 0;">发送验证码</p> -->
                </div>
        </div>
        <div class="advantage" style="background:rgb(230, 227, 227);">
                <ul>
                    <li style="float:left;margin-left:.3rem;">
                        <img src="../../../../../../assets/style/iconfont/tui.svg">
                        <p>支持随时退款</p> 
                    </li>
                    <li style="float:right;margin-right:.5rem;">
                        <img src="../../../../../../assets/style/iconfont/tui.svg">
                        <p>支持过期自动退</p> 
                    </li>
                </ul>
        </div>
        <div style="background:rgb(230, 227, 227);">
        <div class="submit" style="height:1rem;">
            <button style="height:1rem;width:90%; border-radius: .2rem;background-color: #06c1ae;font-size:.35rem;color:white;">提交订单</button>
        </div>


         <div class="kong" style="height:.3rem;background-color:rgb(243, 241, 241)"></div>
             <div class="button_middle">
            <div class="box2">
                    <a href="">首页</a>
            </div>
            <div class="box3">
                |
            </div>
            <div class="box2">
                    <a href="">我的</a> 
            </div>
            <div class="box3">
                    |
                </div>
            <div class="box2">
                    <a href="">美团下载</a> 
            </div>
            <div class="box3">
                    |
                </div>
            <div class="box2">
                    <a href="">电脑版</a> 
            </div>
            <div class="box3">
                    |
                </div>
            <div class="box2">
                    <a href="">帮助</a> 
            </div>
            
        </div>
        <div class="footer_link" style="padding:.4rem 0;height:1.9rem;width:100%;background-color:rgb(243, 241, 241);">
            友情链接： <a href="" style="color:rgb(18, 190, 167);text-decoration-line: none;">天猫电影</a>
            <p style="margin-top:.3rem;color:;">2019 美团网 京ICP证070791号</p>
        </div>
        </div>
    </div>

</template>

<script>
export default {
    name:"QiangInfo.vue"
}
</script>

<style scoped>
/* .Qiang{
   
} */
.unit_price, .unit_amount, .total_price, .need_pay{
    height: .6rem;
    padding: .3rem 0;
    margin:0 .4rem;
    /* margin:.2rem 0; */
    border-bottom:solid .01rem rgb(230, 227, 227);
}
.unit_price p.left{
    width:13%;
    color: rgb(150, 145, 145);
    font-size: .35rem;
    float: left;
}
.unit_amount p.left{
    width:13%;
    color: rgb(150, 145, 145);
    font-size: .35rem;
    float: left;
}
.total_price p.left{
    width:13%;
    color: rgb(150, 145, 145);
    font-size: .35rem;
    float: left;
    
}
.need_pay p.left{
    width:25%;
    color: rgb(150, 145, 145);
    font-size: .35rem;
    float: left;
}
.hold{
    height: 1rem;
    background-color: antiquewhite;
   
}
.advantage{
    line-height: .9rem;
    height: 1.2rem;
}
ul li{
    list-style: none;
    width: 32%;
    float: left;
}
ul li img{
  height: 18px;
  width: 18px;
  margin-top: .26rem;
}
ul li p{
    font-size: .31rem;
    color: rgb(79, 129, 29);
    float: right;
    margin-bottom: .22rem;
}
ul li p.light{
    color: #000;
}

.button_middle{
    padding-top: .3rem;
    background-color: rgb(243, 241, 241);
    padding-top: .02rem;
    float: left;
    height: 45px;
    width: 100%;
}
.box2{
    text-size-adjust: auto;
    text-align: center;
    padding-top: 2px;
    float: left;
    width: 18%;
    height: 30px;
}
.box2 a{
    text-decoration-line: none;
    color: rgb(18, 190, 167);
}
.box3{
    width: 2%;
    float: left;
    height: 30px;
}
</style>
